<template>
	<div class='detail'>
		<header>
			<div class='header-returns' v-show='isShow'>
				<div @click='goBack' class="goBack">
					<i class='iconfont icon-fanhui'></i>
				</div>
			</div>

			<div class='header-bar' v-show='!isShow' :style='styleOption'>
				<div @click='goBack'>
					<i class='iconfont icon-fanhui'></i>
				</div>
				<div>
					<span>商品详情</span>

				</div>
			</div>
		</header>
		<section ref='wrapper'>
			<div>
				<div class='swiper-main'>
					<swiper :options="swiperOption">

						<swiper-slide>
							<img :src="goods.imgUrl" alt="">
						</swiper-slide>
						<swiper-slide v-show="goods.img1 !== null">
							<img :src="goods.img1" alt="">
						</swiper-slide>
						<swiper-slide v-show="goods.img2 !== null">
							<img :src="goods.img2" alt="">
						</swiper-slide>
						<swiper-slide v-show="goods.img3 !== null">
							<img :src="goods.img3" alt="">
						</swiper-slide>
					</swiper>
					<div class="swiper-pagination"></div>
				</div>
				<div class='goods-name'>
					<h1>{{ goods.name }}</h1>
					<div>{{ goods.content }}</div>
				</div>
				<div class='goods-price'>
					<div class='oprice'>
						<span>¥</span>
						<b>{{ goods.price }}</b>
					</div>

				</div>
				<div>
					<img style='width:100%;height: 390px;' :src="goods.imgUrl" alt="">
					<img v-show="goods.img1 !== null" style='width:100%;height: 390px;' :src="goods.img1" alt="">
					<img v-show="goods.img2 !== null" style='width:100%;height: 390px;' :src="goods.img2" alt="">
					<img v-show="goods.img3 !== null" style='width:100%;height: 390px;' :src="goods.img3" alt="">
				</div>
				<div class="introduce">
					<van-collapse v-model="activeNames">
						<van-collapse-item title="商品细节" name="1">
							<div>{{ goods.detail }}</div>
							<ul style="marginTop:25px;">
								<li>• {{ goods.material }}</li>
								<li>• {{ goods.material2 }}</li>
								<li v-show="goods.l !== null">• 长: {{ goods.l }} CM</li>
								<li v-show="goods.w !== null">• 宽: {{ goods.w }} CM</li>
								<li v-show="goods.h !== null">• 高: {{ goods.h }} CM</li>
								<li v-show="goods.netWt !== null">• 净含量: {{ goods.netWt }} ML</li>
								<li v-show="goods.lens !== null">• 镜片: {{ goods.lens }} MM</li>
								<li v-show="goods.bridge !== null">• 鼻梁架: {{ goods.bridge }} MM</li>
								<li v-show="goods.temple !== null">• 镜腿: {{ goods.temple }} MM</li>
								<li v-show="goods.cmyk !== null">• 色号: # {{ goods.cmyk }}</li>
								<li>• 货号: {{ goods.artNo }}</li>
							</ul>
						</van-collapse-item>
						<van-collapse-item title="配送信息" name="2">
							部分城市支持当日达、次日达；当日达请于当日9:30前提交订单，次日达请于当日15:30前提交订单。支持顺丰速运，部分偏远地区支持EMS</van-collapse-item>
						<van-collapse-item title="退换货" name="3">14天轻松退换货服务</van-collapse-item>
						<van-collapse-item title="联系我们" name="4">400 800 8800</van-collapse-item>
					</van-collapse>
				</div>
				
			</div>
		</section>
		<footer>
			<div class='add-cart' @click='addCart'>加入购物车</div>
			
			<div @click="goPay">立即购买</div>
		</footer>
		<van-popup round v-model="show">添加购物车成功</van-popup>
	</div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import BetterScroll from 'better-scroll'
import http from '@/common/api/request.js'
export default {
	data() {
		return {
			id: 0,
			goods: {},
			styleOption: {},
			BetterScroll: '',
			isShow: true,
			swiperOption: {
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false,
				},
				speed: 1000,
				pagination: {
					el: '.swiper-pagination',
					type: 'fraction'
				}
			},
			activeNames: ['1'],
			show:false
		}
	},
	components: { swiper, swiperSlide },
	created() {
		this.id = this.$route.query.id

		this.getData()
	},
	mounted() {
		this.BetterScroll = new BetterScroll(this.$refs.wrapper, {
			probeType: 3,
			bounce: false,
			click: true
		})
		this.BetterScroll.on('scroll', (pos) => {
			let posY = Math.abs(pos.y);
			let opacity = posY / 180;

			opacity = opacity > 1 ? 1 : opacity;

			this.styleOption = {
				opacity: opacity
			}

			if (posY >= 50) {
				this.isShow = false
			} else {
				this.isShow = true
			}
		})
	},
	activated() {

		// 判断当前url， id和之前id是否一致
		if (this.$route.query.id != this.id) {
			this.getData()
			this.id = this.$route.query.id
		}
	},
	methods: {
		async getData() {
			let id = this.$route.query.id
			let res = await http.$axios({
				url: '/api/goods/id',
				params: {
					id
				}
			})
			this.goods = res
		},
		// 加入购物车
		addCart() {
			let id = this.$route.query.id;
			http.$axios({
				url: '/api/addCart',
				method: 'POST',
				data: {
					goodsId: id
				},
				headers: {
					token: true
				}
			}).then(res => {
				if (res.success) {
					console.log('添加成功');
					this.show = true;
				}
			})
		},
		// 返回上一页
		goBack() {
			this.$router.back()
		},
		goPay(){
			let id = this.$route.query.id;
			http.$axios({
				url: '/api/addCart',
				method: 'POST',
				data: {
					goodsId: id
				},
				headers: {
					token: true
				}
			}).then(res => {
				if (res.success) {
					console.log('添加成功');
					this.$router.push('/cart');
				}
			})
		}
	}

}
</script>

<style scoped>
.detail {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 1.473333rem;
}





.goBack {
	height: 0.933333rem;
}

.header-returns i {
	font-size: 0.693333rem;
	color: #1b1b1b;
	padding-left:0.266666rem;
}


.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 1.473333rem;
	font-size: 0.426666rem;
	background-color: #fff;
}



.header-bar span {
	padding: 0 0.266666rem;
	margin-right: 150px;
	color: #1b1b1b;
}

.header-bar i {
	padding: 0 0.266666rem;
	font-size: 0.693333rem;
	color: #1b1b1b;
}

section {
	flex: 1;
	overflow: hidden;
}

.swiper-main {
	position: relative;
	width: 100%;
	height: 10rem;
	overflow: hidden;
}

.swiper-container {
	width: 100%;
	height: 10rem;
}

.swiper-container img {
	width: 100%;
	height: 10rem;
}

.swiper-pagination {
	bottom: 0.266666rem;
	width: 100%;
	text-align: right;
	color: #FFFFFF;
	font-size: 0.426666rem;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
	left: -0.533333rem;
}

.goods-name {
	padding: 0.533333rem 0.266666rem;
	border-bottom: 1px solid #CCCCCC;
}

.goods-name h1 {
	font-size: 0.533333rem;
	font-weight: 500;
}

.goods-name div {
	padding: 0.08rem 0;
	font-size: 0.373333rem;
	color: #999999;
}

.goods-price {
	padding: 0.533333rem 0.266666rem;
}

.oprice {
	color: #1b1b1b;

}

.oprice span {
	font-size: 0.52rem;
}

.pprice {
	color: #999999;
	font-size: 0.373333rem;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 1.306666rem;
	border-top: 1px solid #cccccc;
	background-color: #fff;

}

footer div {
	width: 50%;
	line-height: 1.306666rem;
	font-size: 0.426666rem;
	text-align: center;
	color: #fff;
	background-color: #1b1b1b;
}

.add-cart {
	background-color: #cccccc;
}

.introduce {
	width: 100%;
	height: 100vh;
}

::v-deep .van-popup .van-popup--top .van-notify .van-notify--danger {
	height: 1.173333rem;
	font-size: 18px;
}

::v-deep .van-popup--center {
	width: 150px;
	height: 45px;
    background-color: #ccc;
    text-align: center;
    align-items: center;
    line-height: 45px;
	font-size: 16px;
}
</style>